<template>
  <div class="changeuser">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-uploader :after-read="afterRead" />
    <van-image
  round
  width="5rem"
  height="5rem"
  :src=imgurl
/>
    <van-form @submit="onSubmit">
      <van-field
        v-model="nickName"
        name="nickName"
        label="用户昵称"
        placeholder="用户昵称"
        :rules="[{ required: true, message: '请填写用户昵称' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqgetuser, reqchangeuser } from "../../api/user";
export default {
  data() {
    return {
      imgurl: "",
      nickName: "",
      user: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    //返回上一页
    onClickLeft(){
        this.$router.go(-1);
    },
    //获取用户信息
    async getuser() {
      const result = await reqgetuser();
    //   console.log(result);
      this.user = result;
      this.imgurl = result.avatar;
      this.nickName = result.nickName;
    },
    //上传头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.imgurl = file.content;
    },
    //提交修改信息
    async onSubmit(values) {
      //   console.log('submit', values);
      const result = await reqchangeuser({ ...values, avatar: this.imgurl });
    //   console.log(result);
      if (result.code == "success") {
        Toast("修改用户信息成功");
        this.$router.push("/mine");
      }
    },
  },
  created() {
    this.getuser();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.imgs {
  width: 100px;
  height: 100px;
}
</style>
